<template>
  <div class="oilcard">
    <c-title :hide="false" text="IC卡"></c-title>
    <div class="list">
      <div class="lis" v-for="(item, index) in list" :key="index" @click="toCard(item.card_num)">
        <div class="txt">{{ item.card_num }}</div>
        <div class="price">余额：￥{{ item.balance }}</div>
      </div>
    </div>
    <div class="buttonBox set-pc-style">
      <div class="btn" @click="bindCard">绑定IC卡</div>
    </div>
  </div>
</template>
<script>
// import { scrollMixin } from "utils/mixin";
export default {
  // mixins: [scrollMixin],
  data() {
    return {
      list: []

      // isLoadMore: true,
      // page: 1,
      // total_page: 0
    };
  },
  activated() {
    this.getData();
  },
  methods: {
    async getData() {
      let { data, msg, result } = await $http.post("plugin.oil-card.frontend.oil-card-manage.index", {}, "");
      if (result) {
        this.list = data;
      } else {
        this.$toast(msg);
      }
    },
    toCard(id) {
      this.$router.push(this.fun.getUrl("oilcard_index", { id: id }));
    },
    bindCard() {
      this.$router.push(this.fun.getUrl("oil_bind_card", {}));
    }
  }
};
</script>
<style lang="scss" scoped>
.buttonBox {
  background: #ffffff;
  position: fixed;
  bottom: 0;
  left: 0;
  padding: 0.63rem 0.75rem;
  box-sizing: border-box;
  width: 100%;
  .btn {
    width: 100%;
    background: #f15353;
    border-radius: 1.28rem;
    height: 2.5rem;
    text-align: center;
    line-height: 2.5rem;
    font-weight: 500;
    font-size: 0.94rem;
    color: #ffffff;
  }
}
.list {
  margin: 0.63rem 0.75rem;
  .lis {
    background: #ffffff;
    border-radius: 0.5rem;
    padding: 0.9rem 0.75rem;
    text-align: left;
    margin-bottom: 0.5rem;
    .txt {
      font-weight: 500;
      font-size: 0.81rem;
      color: #00001c;
      margin-bottom: 0.3rem;
    }
    .price {
      font-size: 0.81rem;
      color: #6e6e79;
    }
  }
}
</style>
